@import "../../../core/index";

.mobile-content-bar-content-top-wrapper {
    overflow: hidden;
    border-bottom-left-radius: 10/@remScale;
    border-top-left-radius: 0;
    width: @toolBar-pc-width;
    //height: 0;
    opacity: 1;
    height: 70/@remScale;
    visibility: visible;
    //transition: opacity .1s .4s linear,width .1s .1s linear,height .2s .3s linear,visibility .1s .2s linear;
    position: relative;

    .item-wrapper {
        height: 35/@remScale;
        line-height: 33/@remScale;
        text-align: center;
        color: #FFffff !important;
        background-color: rgba(0, 0, 0, 1);
        opacity: 0.8;
        position: relative;
        .icon {
            color: #FFffff;
            margin-right: 8/@remScale;
        }
        span {
            color: #FFffff;
            font-size: 15/@remScale;
        }
        .line {
            position: absolute;
            bottom: 0;
            left: 20/@remScale;
            right: 20/@remScale;
            height: 1/@remScale;
            background-color: rgba(255, 255, 255, .2);
        }

    }

    .item-wrapper:last-child {
        .line {
            position: absolute;
            bottom: 0;
            left: 20/@remScale;
            right: 20/@remScale;
            height: 1/@remScale;
            background-color: transparent;
        }
    }

    &.hide-content-bar-top-content {
        opacity: 0;
        width: 0;
        height: 0;
        //visibility: hidden;
        //transition: opacity .3s .4s linear,height .2s linear,visibility .2s .3s linear;
    }
    @media (max-width: @max1) {
        width: @toolBar-phone-width;
    }
}
